// 导入必要的模块和函数
import el from '../utils/el'
import box from './box'
import braceElement from './braceElement'

/**
 * 生成 每一行 头部 元素的函数
 * @param {Object} systemHeadLayout - 每一行头部的布局对象，包含partNamesLayouts和bracesLayouts
 * @returns {Element} - 返回一个小组件，包含所有部分名称和括号元素
 */
export default function systemHeadElement(systemHeadLayout) {
  // 从systemHeadLayout对象中解构出部分名称布局和括号布局
  const { partNamesLayouts, bracesLayouts } = systemHeadLayout

  /**
   * 根据布局对象生成文本样式的函数
   * @param {Object} layout - 包含字体家族、字体大小的布局对象
   * @returns {String} - 返回生成的文本样式字符串
   */
  const getStyle = layout => {
    return `
      font-family: ${layout.family}
      font-size: ${layout.size}
      text-anchor: end
      alignment-baseline: middle
    `
  }

  // 返回一个包含所有元素的小组件
  return el.create('g', [
    // box(systemHeadLayout, 'green'),
    // partNamesLayouts.map(layout => box(layout, 'red')),

    // 根据partNamesLayouts生成文本元素
    partNamesLayouts.map(layout => {
      return el('text', {
        ...layout.x2cy, style: getStyle(layout)
      }, layout.text)
    }),

    // 根据bracesLayouts生成括号元素
    bracesLayouts ? bracesLayouts.map(layout => braceElement(layout)) : []
  ])
}
